【沒錢買ps，PyQt自己寫】Day 23 - 使用系統內建的調色盤 QColorDialog，來替我們選擇顏色 QColor (Color Picker)

13th鐵人賽

嗡嗡

2021-10-08 22:15:34

1753 瀏覽

分享至

看完這篇文章你會得到的成果圖

此篇文章的範例程式碼 github

https://github.com/howarder3/ironman2021_PyQt5_photoshop/tree/main/day23_QColorDialog

之前內容的重點複習 (前情提要)

我們接下來的討論，會基於讀者已經先讀過我 day5 文章的架構下去進行程式設計
如果還不清楚我程式設計的邏輯 (UI.py、controller.py、start.py 分別在幹麻)
建議先閱讀 day5 文章後再來閱讀此文。

https://www.wongwonggoods.com/python/pyqt5-5/

系統內建的調色盤 QColorDialog

在 mac, windows, linux 上都會有系統預設的調色盤 QColorDialog,
隨著使用系統不同也會得到不同的調色盤。

而我們今天要藉由這個工具來幫助我們挑選顏色。

建立 UI

替 Qlabel 建立一個 border

我們修改 Qframe 的屬性

這樣我們就能建立一個明確的邊框

關於 Qframe 的屬性，可以參考這邊查詢

延伸閱讀：QFrame类
文內提供的參考圖：

轉換 day23.ui -> UI.py

pyuic5 -x day23.ui -o UI.py

執行看看 UI.py 畫面是否如同我們想像

一樣，這程式只有介面 (視覺上的呈現)，沒有任何互動功能

看看我們製作出來的介面

python UI.py

建立控制 controller.py

設定按鈕、顯示顏色

我們先將 label 內的文字設為 "QColorDialog"，
然後連結 pushButton 至 set_label_color 這個 function

from PyQt5 import QtCore 
from PyQt5.QtWidgets import QMainWindow, QColorDialog

from UI import Ui_MainWindow

class MainWindow_controller(QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.setup_control()

    def setup_control(self):
        self.ui.label.setText("QColorDialog")
        self.ui.pushButton.clicked.connect(self.set_label_color)

在 set_label_color()，我們使用 QColorDialog

我們只要呼叫 QColorDialog.getColor()，就會呼叫系統內建的調色盤，
之後我們可以透過

print(color.name())：會得到 CSS 值 #ff5b87
print(color.red(), color.green(), color.blue())：會得到 RGB 值 (0~255) # 255 91 135
self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))：直接設定背景顏色，需先轉換格式為 strRGB

def set_label_color(self):
    color = QColorDialog.getColor() # OpenColorDialog
    if color.isValid():
        print(color.name()) #ff5b87
        print(color.red(), color.green(), color.blue()) # 255 91 135

    r, g, b = color.red(), color.green(), color.blue()        
    strRGB = ('{:^3d}, {:^3d}, {:^3d}'.format(r, g, b))

    self.ui.label.setStyleSheet('background-color:rgb({});'.format(strRGB))